<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ taglib prefix="sitemesh"
	uri="http://www.opensymphony.com/sitemesh/decorator"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="decorator" content="mainframe" />
<title>用户管理</title>
</head>
<body>
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			用户<small>列表显示</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i>用户管理</a></li>
			<!-- <li class="active">Here</li> -->
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="box  box-default">
			<div class="box-header">
				<button type="button" class="btn btn-default" id="add">添加</button>
				<div class="box-tools pull-right" >
				<form class="form-horizontal" role="form" id="searchForm" action="<%=request.getContextPath()%>/user/list">
					<div class="input-group input-group-sm" style="width:150px; height:30px;display:inline-block" >
							<input class="form-control input-sm" type="text" name="cellphone" id="cellphone" placeholder="电话" value="${user.cellphone}"/>
					 </div>
					 <div class="input-group input-group-sm" style="width:150px; height:30px;display:inline-block" >
					 		<select class="form-control selectpicker show-tick" name="gender" >
								<option value='' <c:if test="${user.gender  == '' }">selected="selected"</c:if>>按性别查找</option>
								<option value='1' <c:if test="${user.gender == 1 }">selected="selected"</c:if>>男</option>
								<option value='0' <c:if test="${user.gender == 0 }">selected="selected"</c:if>>女</option>
							</select> 
					 </div>
					<div style="display:inline-block"  >
							<div class="input-group input-group-sm" style="width:150px; height:30px;"  >
								<input class="form-control input-sm" type="text" name="userName" id="userName" placeholder="用户名" value="${user.userName}"/>
				 					<div class="input-group-btn"  >
			                     	   <button class="btn btn-sm btn-default" onclick="javascript:submitSearch();"><i class="fa fa-search"></i></button>
			                    	</div>
							</div>
					</div>
					
					<input type="hidden" name="totalPages" id="totalPages" value="${pager.totalPages }"/>
					<input type="hidden" name="pageNo" id="pageNo" value="${pager.pageNo }"/>
					<input type="hidden" name="pageSize" value="${pager.pageSize }"/>
				</form>
				</div>
			</div>

			<div class="box-body">
				<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
					<input type="hidden" value="${message}" id="message">
					<!--<caption>基本的表格布局</caption>  -->
					<thead>
						<tr>
						  <th>用户名</th>
						  <th>电话</th>
						  <th>性别</th>
						  <th>邮箱</th>
						  <th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="user" items="${pager.datas}" varStatus="status">
							<tr>
							     
								<input type="hidden" id="pk${status.index }" name="userId" value="${user.userId}"/>
								<td>${user.userName}</td>
								<td>${user.cellphone}</td>
								<td>
									<c:if test="${user.gender  eq 1}"><span style="color:green">男</span></c:if>
									<c:if test="${user.gender  eq 0}"><span style="color:red">女</span></c:if></td>
								</td>
								<td>${user.email}</td>
								<td>
									<a href="javascript:void(0)" onclick='updateOne(this)'  style="cursor: pointer;">修改</a> 
									<a href="javascript:void(0)" onclick='deleteOne(this);' style="cursor: pointer;">删除</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<nav id="pager"></nav>
			</div>
		</div>

	</section>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/static/plugins/jquery/pager/jquery.pager.bootstrap.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/static/plugins/jquery/pager/pager.js"></script>
	<script>
		var path = "<%=request.getContextPath()%>";
		//传递的参数
		var totalPages ="${pager.totalPages}";	
		var pageNo ="${pager.pageNo}";	
		var pageSize ="${pager.pageSize}";
		
		$(document).ready(function() {
			//操作成功提示
			  var message=  $('#message').val();
			  if(message!=null&&message!=''){
				  alert(message);
			  }
			initPager("pager", pageNo, totalPages, function(pageclickednumber){
				$("input[name='pageNo']").val(pageclickednumber);
				$("#searchForm").submit();
		 	}, {});
			$("#add").bind("click", function() {
				window.location.href=path+"/user/addUI";
	         });
		});
		
		function submitSearch(){
			$("#searchForm").submit();
 	 	}
		
		function deleteOne(nowTr){
			var userId= $(nowTr).parent().parent().find("input[name=userId]").val();
			confirmBox("确定删除?", function(nowTr){
				 $.ajax({
					 url:path+"/delete/"+userId,
					 data: {userId:userId},
		             dataType: "json",
					 success:function(msg){
							if(msg>0){
								alert("删除成功");
								$(nowTr).parent().parent().remove();
							}else{
								alert("删除失败");
							}
					}
				});			
			}, nowTr, {
				cancleText : "再想想", 
				okText :  "删除",
			});
		};
		function updateOne(nowTr){
			var userId = $(nowTr).parent().parent().find("input[name=userId]").val();
			window.location.href=path+"/user/updateUI/"+userId;
		};
	</script>
</body>
</html>